<?php
	session_start();
	if (!isset($_SESSION["loginid"])) {
		echo "<script language='javascript'>";
		echo "alert('You have no permission!!');";
		echo "location.href = 'login.php';";
		echo "</script>";
	}else {
		require APP_DIR.'/host_config.php';
		require Controllers_DIR.'index_controller.php';
		$loginid = $_SESSION["loginid"];
		$user = new Index_Controller();
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>OrderRest - Management System</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="<?php echo CSS_DIR.'bootstrap.min.css'?>" rel="stylesheet">
		<link href="<?php echo CSS_DIR.'main2.css'?>" rel="stylesheet">
		<style type="text/css">
			body {
				padding-top: 60px;
				padding-bottom: 40px;
				font-size: 16px;
			}
			.nav-header {
				font-size: 24px;
			}
			.feature-nav {
				padding: 15px;
				height: 370px;
			}
			.info-nav {
				margin: 0;
				padding: 15px;
				height: 170px;
			}
			#profile {
				
			}
			#order {

				margin: 0 auto;
			}
			.tab-content {
				height: 560px;
			}
		</style>
		<link href="<?php echo CSS_DIR.'bootstrap-responsive.min.css'?>" rel="stylesheet">		
	</head>
	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
      		<div class="navbar-inner">
        		<div class="container-fluid">
          			<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
          			</button>
          			<a class="brand" href="#"><?php echo $user->getShopName($loginid);?></a>
          			<div class="nav-collapse collapse">
            			<p class="navbar-text pull-right">
              				Logged in as <a href="#" class="navbar-link">Username</a>
            			</p>
            			<ul class="nav">
              				<li class="active"><a href="#">Home</a></li>
              				<li><a href="#about">About</a></li>
              				<li><a href="#contact">Contact</a></li>
            			</ul>	
          			</div><!--/.nav-collapse -->
        		</div>
      		</div>
    	</div>
    	<div class="container-fluid">
    		<div class="row-fluid">
    			<div class="span2">
    				<div class="well feature-nav">
	    				<ul class="nav nav-list" id="feature-tab">
	    					<li class="nav-header">功能<hr></li>
	    					<li><a href="#order">餐廳訂位資訊</a></li>
	    					<li><a href="#profile">餐廳資料修改</a></li>
	    				</ul>
    				</div><!--/.well-->
    				<div class="well info-nav">
	    				<ul class="nav nav-list">
	    					<li class="nav-header">訂位資訊<hr></li>
	    					<li>最大訂位人數：<span id="maxOrderNum">123</span></li>
	    					<li>目前訂位人數：<span id="currentOrderNum">123</span></li>
	    				</ul>
    				</div><!--/.well-->
    			</div><!--/.span3-->
    			<div class="span10">
    				<div class="tab-content">
    					 <div class="tab-pane active" id="order"></div>
    					 <div class="tab-pane well" id="profile"></div>
    				</div>
    			</div><!--/.span9-->
    		</div><!--/.row-fluid-->

    	<footer>
    		<p>&copy; Company 2013</p>
    	</footer>
    	</div><!--/.container-fluid-->


		<!-- JS -->
		<!--
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	-->
		<script src="<?php echo LIB_DIR.'jquery-1.10.2.min.js'?>"></script>
		<script src="<?php echo LIB_DIR.'jquery-ui-1.10.3.custom.min'?>"></script>
		<script src="<?php echo LIB_DIR.'bootstrap.min.js'?>"></script>
		<script>
	    	$('#feature-tab a').click(function (e) {
    			e.preventDefault();
    			$(this).tab('show');
    		})

			$(function() {
				$('#feature-tab a').on('shown', function(e){
					console.log(e.target.href);
					//console.log(e.relatedTarget.href);					
				})
				$('#feature-tab a').on('show', function(e){
					switch($(e.target).attr('href')) {
						case '#profile':
							$.get('/modifyForm', function(response){
								$('div#profile').html(response);
							});break;
						case '#order':
							$.get('/orderinfo2', function(response){
								$('div#order').html(response);
							});break;
					}
				})
			})
		</script>
	</body>
</html>	
<?php		
	}
?>